<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if, v-show, v-for</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <div v-if="show">hello world</div>          <!-- 当show为false时会直接把标签从文档树中移除 -->
        <div v-show="show">leihou world</div>       <!-- 当show为false时并没有从文档树中清除，而是把display属性设为none -->

        <ul>
            <li v-for="(item, index) of list" :key="index">{{item}}</li>  <!-- :key会提高每一项渲染的效率，每一项的key值不能相同 -->
        </ul>

        <button @click="handleClick">toggle</button>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                show: true,
                list: [1, 2, 3]
            },
            methods: {
                handleClick: function() {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>
</html>